<template>
  <teleport to="body">
    <div v-if="showPreview" class="preview-overlay">
      <div class="preview-container">
        <img :src="imageUrl" alt="Preview Image" />
        <div class="close-btn" @click="close">
          <el-icon><Close /></el-icon>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { Close } from '@element-plus/icons-vue';
import { ref } from 'vue';

const showPreview = ref(false);
const imageUrl = ref<string>('');

function open(imageUrlT: string) {
  showPreview.value = true;
  imageUrl.value = imageUrlT;
}

function close() {
  showPreview.value = false;
  imageUrl.value = '';
}

defineExpose({ open })

</script>

<style lang="scss" scope>
.preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3002;
}

.preview-container {
  position: relative;
  width: 95%;
  height: 95%;
  .close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #000;
    background-color: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0 0 5px #00000005;
    width: 44px;
    height: 44px;
    font-size: 24px;
    color: #fff;
    background-color: #606266;
    border-color: #fff;
    cursor: pointer;
  }
}

.preview-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-container button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: white;
  border: none;
  cursor: pointer;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.preview-overlay.fade-enter-active,
.preview-overlay.fade-leave-active {
  opacity: 1;
}

.preview-overlay.fade-enter,
.preview-overlay.fade-leave-to {
  opacity: 0;
}
</style>